<template>
  <el-container class="main_con">
    <div class="filter_con nopt">
      <div class="filter_area">
        <el-input
          class="serach_input mr_15 mt_15"
          size="medium"
          v-model="obj.name"
          placeholder="请输入用户名"
          style="width:250px;"
        ></el-input>
        <el-input
          class="serach_input mr_15 mt_15"
          size="medium"
          v-model="obj.order_no"
          placeholder="请输入订单编号"
          style="width:250px;"
        ></el-input>
        <el-input
          class="serach_input mr_15 mt_15"
          size="medium"
          v-model="obj.cname"
          placeholder="请输入商品名称"
          style="width:250px;"
        ></el-input>
        <label class="mr_15 mt_15">状态</label>
        <el-select size="medium" v-model="obj.status" placeholder="请选择" class="mr_15 mt_15">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>

    <div class="list_con">
      <el-tabs v-model="obj.is_self" @tab-click="handleClick" v-if="loginType =='mall'">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="自营" name="1"></el-tab-pane>
        <el-tab-pane label="商户" name="2"></el-tab-pane>
      </el-tabs>
      <el-table :data="list" element-loading-text fit highlight-current-row>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="商品" width="400px">
          <template slot-scope="scope">
            <div class="pro">
              <div class="master">
                <vimage style="width: 50px; height: 50px;" :src="scope.row.master" :fit="'fit'"></vimage>
              </div>
              <div class="info">
                <div class="name">{{scope.row.name}}</div>
                <div class="order">订单：{{scope.row.order_no}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="评论内容"></el-table-column>
        <!-- <el-table-column prop="order_no" label="订单编号"></el-table-column> -->
        <el-table-column label="评论人" width="200px">
          <template slot-scope="scope">
            <div class="user">
              <div class="face">
                <vimage
                  style="width: 50px; height: 50px;border-radius:50%;"
                  :src="scope.row.picurl"
                  :fit="'fit'"
                ></vimage>
              </div>
              <div class="info">
                <div class="name">{{scope.row.nickname}}</div>
                <div class="source">
                  <i class="weixin el-sc-weixin4"></i>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="分数" width="200px">
          <template slot-scope="scope">
            <el-rate v-model="scope.row.score_value" disabled></el-rate>
          </template>
        </el-table-column>

        <el-table-column prop="create_time" label="评论时间" width="200px"></el-table-column>
        <el-table-column prop="state" label="状态" width="80px">
         <template slot-scope="scope">
            <span v-if="scope.row.state =='1'" style="color:#F56C6C;">未审核</span>
            <span v-if="scope.row.state =='2'" style="color:#67C23A;">已审核</span>
            <span v-if="scope.row.state =='3'">驳回</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200px" >
          <template slot-scope="scope">
            <el-button type="text" @click="itemShow(scope.row)">查看</el-button>
            <el-button
              v-has
              type="text"
              v-if="scope.row.state == 1&&loginType=='mall'"
              @click="itemAudit(scope.row)"
            >审核</el-button>
            <el-button v-has type="text" v-if="!scope.row.reply" @click="itemReply(scope.row)">回复</el-button>
            <el-button v-if="loginType=='mall'" v-has type="text" @click="itemDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" style="flex-direction: row-reverse;" v-show="total != 0">
        <el-pagination
          @current-change="changePage"
          :current-page="page"
          class="pages"
          background
          hide-on-single-page
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="审核评论" :visible.sync="isAudit" destroy-on-close width="50%">
      <commentAudit :comment="auditObj" @success="itemAuditDone"></commentAudit>
    </el-dialog>
    <el-dialog title="回复评论" :visible.sync="isReply" destroy-on-close width="50%">
      <commentReply :comment="replyObj" @success="itemReplyDone"></commentReply>
    </el-dialog>
    <el-dialog title="查看评论" :visible.sync="isShow" destroy-on-close width="50%">
      <commentShow :comment="showObj"></commentShow>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  delComment,
  getCommentList,
  getMallCommentList
} from "@/api/shop/comment";
import { logintype_byurl } from "@/utils/auth";
import commentAudit from "./components/commentAudit";
import commentReply from "./components/commentReply";
import commentShow from "./components/commentShow";
export default {
  data() {
    return {
      isAudit: false,
      auditObj: {},
      isReply: false,
      replyObj: {},
      isShow: false,
      showObj: {},
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 1,
          label: "未审核"
        },
        {
          value: 2,
          label: "已审核"
        },
        {
          value: 3,
          label: "驳回"
        }
      ],
      obj: {
        name: "",
        order_no: "",
        cname: "",
        status: "",
        is_self: 0
      },
      objTemp: {},
      page: 1,
      size: 10,
      total: 0,
      isLoading: false,
      list: [],
      loginType: "",
      activeName: "second"
    };
  },
  components: {
    commentAudit,
    commentReply,
    commentShow
  },
  created() {
    if (logintype_byurl() == "mall") {
      this.loginType = "mall";
    } else if (logintype_byurl() == "shop") {
      this.loginType = "shop";
    }
  },
  mounted() {
    this.searchList();
  },
  methods: {
    //查询数据
    searchList() {
      //复制查询对象
      this.objTemp = Object.assign({}, this.obj);
      this.page = 1;
      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      if (this.loginType == "shop") {
        getCommentList(this.objTemp, this.page, this.size).then(res => {
          this.isLoading = false;
          let o = res.msg;
          //处理分数数据
          o.data.forEach(e => {
            e.score_value = e.score / 2;
          });
          this.list = o.data;
          this.total = o.total;
        });
      } else if (this.loginType == "mall") {
        getMallCommentList(this.objTemp, this.page, this.size).then(res => {
          this.isLoading = false;
          let o = res.msg;
          //处理分数数据
          o.data.forEach(e => {
            e.score_value = e.score / 2;
          });
          o.data.forEach(a=>{
            a.img_url=JSON.parse(a.img_url)
          })
          this.list = o.data;
          this.total = o.total;
        });
      }
    },
    //审核评论
    itemAudit(obj) {
      this.auditObj = { ...obj };
      this.auditObj.state = 2;
      this.auditObj.remake = "";
      // this.$set(this.auditObj,'state',2);
      // this.$set(this.auditObj,'remake','');
      this.isAudit = true;
    },
    //审核回调
    itemAuditDone() {
      this.isAudit = false;
      this.getDataList();
    },
    //回复评论
    itemReply(obj) {
      this.replyObj = { ...obj };
      this.replyObj.reply = "";
      this.isReply = true;
    },
    //回复回调
    itemReplyDone() {
      this.isReply = false;
      this.getDataList();
    },
    //查看评论
    itemShow(obj) {
      this.showObj = obj;
      this.isShow = true;
    },
    //删除记录
    itemDel(id) {
      this.$confirm("是否要删除该条评论?")
        .then(_ => {
          this.isLoading = true;
          delComment(id)
            .then(res => {
              this.isLoading = false;
              this.getDataList();
            })
            .catch(e => {
              this.isLoading = false;
            });
        })
        .catch(p => {
          //empty
        });
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    },
    handleClick() {
      this.searchList();
    }
  }
};
</script>

<style lang="scss" scoped>
.pro {
  display: flex;

  .info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;

    .name {
      display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: "ellipsis"; /* 溢出用省略号*/
      -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/
      margin-bottom: 5px;
    }
  }
}

.user {
  display: flex;

  .info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;

    .name {
      display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: "ellipsis"; /* 溢出用省略号*/
      -webkit-box-orient: vertical; /*伸缩盒子的子元素排列：从上到下*/
      margin-bottom: 5px;
    }

    .source {
      .weixin {
        font-size: 18px;
        color: #333;
      }
    }
  }
}
</style>
